<template>
	<view class="login">
		<u-popup :show="show" @close="close" @open="open" zIndex="10070">
			<view class="login-box">
				<view class="close flow-flex-start-center">
					<image src="@/static/icon/close.png" mode="" @click="show = false"></image>
				</view>
				<view class="login-top">
					<view class="name">您还未登录</view>
					<view class="dec">请用微信绑定的手机号授权登录或者填写其他手机号</view>
				</view>
				<!-- #ifdef MP-WEIXIN -->
				<template v-if="is_agress && !mobile ">
					<button class="login-btn flow-center" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
						<!-- <image src="@/static/icon/mobile.png" mode="widthFix"></image> -->
						<text>手机号快捷登录</text>
					</button>
				</template>
				<template v-else>
					<view class="login-btn flow-center" @click="loginBtn">
						<!-- <image src="@/static/icon/mobile.png" mode="widthFix"></image> -->
						<text>手机号快捷登录</text>
					</view>
				</template>
				<!-- #endif -->
				<view class="agreement-txt"><text class="select-tag" :class="is_agress ? 'active' : ''"
						@click="is_agress = !is_agress">已阅读并同意</text><text class="blue"
						@click.stop="openDetail('agreement')">用户协议</text><text>和</text><text class="blue"
						@click.stop="openDetail('privacy')">隐私政策</text></view>
			</view>
		</u-popup>
		<!-- 协议弹窗 -->
		<u-popup :show="show2" @close="close2" @open="open2" mode="center" zIndex="99999999">
			<view class="agreement-box">
				<view class="agreement-tit">{{type == 'privacy' ? '隐私政策' : '用户协议'}} </view>
				<view class="agreement-con">
					<scroll-view scroll-y="true">
						<rich-text :nodes="privacy" v-if="type == 'privacy'"></rich-text>
						<rich-text :nodes="agreement" v-else></rich-text>
						<!-- <u-parse :content="privacy" v-if="type == 'privacy'"></u-parse>
						<u-parse :content="agreement" v-else></u-parse> -->
					</scroll-view>
				</view>
				<view class="agreement-btn">
					<view class="btn-lis active flow-center" @click="agreeBtn">同意</view>
					<view class="btn-lis flow-center" @click="unagreeBtn">不同意</view>
				</view>
			</view>
		</u-popup>
		<!-- 提示在浏览器打开 -->
		<view class="guide-box" v-if="isWeixin">
			<view class="guide-img">
				<image src="@/static/icon/guide.png" mode="widthFix"></image>
			</view>
			<view class="guide-top">
				点击右上角选择在浏览器打开~~
			</view>
		</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex';
	export default {
		data() {
			return {
				isWeixin: false,
				mobile:'',
				show: false,
				show2: false,
				type: 'privacy',
				is_agress: false,
				isLoginCode:false
			}
		},
		computed: {
			...mapState(['userMobile','userToken','userInfo','configDetail','privacy','agreement']), // vuex获取用户数据
		},
		mounted(options) {
			if(!this.userToken || !this.userMobile){
				this.loginCode();
			}
		},
		methods: {
			// 登录
			loginCode(){
				let that = this;
				wx.login({
					success(res) {
						if (res.code) {
							that.$H.get('api/user/getUserInfoByCode', {
								code: res.code
							}).then(res => {
								that.session_key = res.session_key;
								that.mobile = res.userinfo.mobile;
								that.userinfo = res.userinfo;
								that.$store.commit('userToken', that.userinfo.token);
							})
						}
					}
				})
			},
			loginBtn(){
				let that = this;
				if(!this.is_agress){
					uni.showToast({
						icon:'none',
						title:'请先阅读并同意协议'
					})
					return false;
				}
				if(that.mobile){
					uni.showToast({
						title: '登录成功',
					})
					that.$store.commit('userMobile', that.mobile);
					that.show = false;
					that.getUserinfo();
					that.$emit("openUrl");//打开填写资料页面
					setTimeout(() => {
						uni.$emit('loginSuccess'); //通知登录成功
					}, 300)
				}
			},
			// 获取用户信息
			getUserinfo(){
				this.$H.post('api/user/getUserInfo', {}).then(res => {
					this.$store.commit('userInfo', res);
				},rej=>{
				});
			},
			// 打开协议
			openDetail(type) {
				this.type = type;
				this.show2 = true;
			},
			// 同意协议
			agreeBtn(type) {
				this.is_agress = true;
				this.show2 = false;
			},
			// 不同意协议
			unagreeBtn(type) {
				this.is_agress = false;
				this.show2 = false;
			},
			// 获取协议
			getDetils(type) {
				let url = type == 'privacy' ? 'api/index/privacy' : 'api/index/agreement';
				this.$H.get(url, {}).then(res => {
					if (type == 'privacy') {
						let privacy = res.replace(/<img([\s\w"-=\/\.:;]+)/ig,
							'<img style="width: 100%;display:block" $1');
						this.privacy = privacy;
					} else {
						let agreement = res.replace(/<img([\s\w"-=\/\.:;]+)/ig,
							'<img style="width: 100%;display:block" $1');
						this.agreement = agreement;
					}
				});
			},
			open() {
				if(!this.userToken || !this.userMobile){
					if(!this.isLoginCode){
						this.isLoginCode = true;
						setTimeout(()=>{
							this.isLoginCode = false;
						},2000)
						this.loginCode();
					}
				}
				this.show = true;
			},
			close() {
				this.show = false
				// console.log('close');
			},
			open2() {
				// console.log('open');
			},
			close2() {
				this.show2 = false
				// console.log('close');
			},
		
			// 授权手机号
			getPhoneNumber(e) {
				let that = this;
				if (!this.is_agress) {
					uni.showToast({
						icon: 'none',
						title: '请先阅读并同意协议'
					})
					return false;
				}
				let params = {
					code: e.detail.code,
				}
				if (e.detail.errMsg == 'getPhoneNumber:ok') {
					that.$H.post('api/user/getPhone', params).then(res => {
						that.$store.commit('userMobile', res.mobile);
						that.getUserinfo();
						that.show = false;
						that.$emit("openUrl");//打开填写资料页面
						setTimeout(() => {
							uni.$emit('loginSuccess'); //通知登录成功
						}, 300)
					})
					
				} else {
					// that.$M.toast("获取失败,请稍后再试");
				}
			},
		}
	}
</script>
<style lang="scss">
	.u-popup__content {
		background-color: transparent !important;
	}
</style>
<style lang="scss" scoped>
	.login-box {
		// height: 400rpx;
		height: 530rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 0rpx 0rpx;
		padding: 0 28rpx;

		.close {
			// padding: 50rpx 0 45rpx;
			padding: 50rpx 0 20rpx;
			justify-content: flex-end;

			image {
				display: block;
				width: 48rpx;
				height: 48rpx;
			}
		}

		.agreement-txt {
			font-size: 28rpx;
			color: #666666;
			text-align: center;
			margin-top: 20rpx;

			text {
				display: inline-block;
				line-height: 60rpx;
			}

			.blue {
				color: #0E54A4;
			}

			.select-tag {
				padding-left: 60rpx;
				background: url("@/static/icon/select.png") no-repeat left center;
				background-size: 40rpx 40rpx;
			}

			.active {
				background: url("@/static/icon/select-active.png") no-repeat left center;
				background-size: 40rpx 40rpx;
			}
		}

		.login-btn {
			width: 686rpx;
			height: 98rpx;
			background: #0E54A4;
			border-radius: 49rpx 49rpx 49rpx 49rpx;
			opacity: 1;
			margin: 48rpx auto 0;
			text-align: center;
			font-size: 34rpx;
			color: #FFFFFF;

			image {
				display: block;
				margin-right: 8rpx;
				width: 38rpx;
				height: 38rpx;
			}
		}
	}

	// 协议
	.agreement-box {
		width: 630rpx;
		height: 924rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		padding: 48rpx 40rpx 0;
		box-sizing: border-box;

		.agreement-tit {
			font-size: 40rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #2D2929;
			text-align: center;
			margin-bottom: 30rpx;
		}

		.agreement-con {
			scroll-view {
				height: 520rpx;
			}

			margin-bottom: 30rpx;
		}

		.agreement-btn {
			.btn-lis {
				margin: 0 auto 30rpx;
				width: 550rpx;
				height: 80rpx;
				border-radius: 40rpx;
				border: 1rpx solid #BBBBBB;
				font-size: 30rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #2D2929;
				text-align: center;
				box-sizing: border-box;
			}

			.active {
				background: #0E54A4;
				color: #FFFFFF;
				border: 1rpx solid #0E54A4;
			}
		}
	}

	.guide-box {
		position: fixed;
		top: 0;
		left: 0;
		height: 100vh;
		width: 100vw;
		z-index: 999;
		background-color: rgba(0, 0, 0, 1);

		.guide-img {
			text-align: right;
			padding: 30rpx 40rpx;

			image {
				display: inline-block;
				width: 200rpx;
				height: 200rpx;
			}
		}

		.guide-top {
			width: 260rpx;
			margin: 100rpx auto 0;
			border: 2rpx dashed #fff;
			padding: 30rpx 50rpx;
			border-radius: 30rpx;
			color: #fff;
			text-align: center;
		}
	}

	.login-top {
		text-align: center;

		.name {
			font-size: 36rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #333333;
			position: relative;
			margin-bottom: 30rpx;
		}

		.dec {
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			color: #666666;
			margin-top: 10rpx;
		}
	}
</style>